<template>
	<div>
		<el-upload :action="action" :headers="headers" :multiple="multiple" :with-credentials="false" :data="data" :show-file-list="showFileList" :drag="false" :accept="accept" :on-preview="onPreview" :on-remove="onRemove" :on-success="onSuccess" :before-upload="beforeUpload" :on-exceed="onExceed" list-type="text" :auto-upload="autoUpload" :file-list="fileList" :disabled="disabled" :limit="limit" :on-change="change" ref="upload">
			<slot v-if="$slots.default"></slot>
			<el-button v-if="!disabled && !$slots.default" slot="default" type="primary">{{ title }}</el-button>
		</el-upload>
	</div>
</template>

<script>
/* eslint-disable */
export default {
	name: "el-upload-file",
	props: {
		uploadClear: {
			type: Boolean,
			default: false,
		},
		showFileList: {
			type: Boolean,
			default: true,
		},
		disabled: {
			type: Boolean,
			default: false,
		},
		multiple: {
			type: Boolean,
			default: true,
		},
		accept: {
			type: String,
			default: "*",
		},
		limit: {
			type: Number,
			default: 1,
		},
		value: {
			type: Array,
			default: () => [],
		},
		title: {
			type: String,
			default: "选择文件",
		},
		autoUpload: {
			type: Boolean,
			default: true,
		},
		notRegType: {
			type: Boolean,
			default: () => {
				return false
			},
		},
		maxSize: {
			type: Number,
			default: 4,
		},
	},
	model: {
		prop: "value",
		event: "change",
	},
	watch: {
		value() {
			if (this.fileList.length !== this.value.length) {
				this.fileList = this.value
				return
			}
			if (this.fileList.length === this.value.length) {
				const result = this.fileList.some((item, index) => {
					return item.url !== this.value[index].url
				})
				if (result) {
					this.fileList = this.value
					return
				}
			}
		},
	},
	mounted() {
		this.fileList = this.value
	},
	data() {
		return {
			action: "/admin/ajax/upload",
			data: {},
			headers: { batoken: this.$store.state.token },
			fileList: [],
			previewUrl: "",
			previewShow: false,
		}
	},
	methods: {
		onPreview(file) {
			this.previewUrl = file.url
			this.previewShow = true
		},
		onRemove(file, fileList) {
			this.fileList = fileList
			this.$emit(
				"change",
				fileList.map((item) => {
					if (item.response) {
						return {
							url: this.$store.getters.baseUrl + item.response.data.file.url,
							name: item.name,
						}
					} else {
						return {
							url: item.url,
							name: item.name,
						}
					}
				})
			)
		},
		change(file, fileList) {
			if (this.multiple) {
				this.$emit("change", fileList)
			} else {
				this.$emit("change", file)
			}
			if (this.uploadClear) {
				setTimeout(() => {
					this.$refs.upload.clearFiles()
				}, 1000)
			}
		},
		onSuccess(response, file, fileList) {
			console.log(response)
			if (response.code === 1) {
				this.$message.success(response.msg)
				this.fileList = fileList
				this.$emit(
					"change",
					fileList.map((item) => {
						if (item.response) {
							return {
								url: this.$store.getters.baseUrl + item.response.data.file.url,
								name: item.name,
							}
						} else {
							return {
								url: item.url,
								name: item.name,
							}
						}
					})
				)

				this.$emit(
					"success",
					fileList.map((item) => {
						if (item.response) {
							return {
								url: this.$store.getters.baseUrl + item.response.data.file.url,
								name: item.name,
							}
						} else {
							return {
								url: item.url,
								name: item.name,
							}
						}
					})
				)
			} else {
				this.$message.error(response.msg)
			}
			if (this.uploadClear) {
				setTimeout(() => {
					this.$refs.upload.clearFiles()
				}, 1000)
			}
		},
		beforeUpload(file) {
			const isAllowSize = file.size / 1024 / 1024 < this.maxSize
			const acceptArr = this.accept.split(",")
			const fileNameSplit = file.name.split(".")
			const suffix = "." + fileNameSplit[fileNameSplit.length - 1]
			const isAllowType = this.accept == "*" ? true : acceptArr.indexOf(suffix) >= 0

			if (this.notRegType) {
				return true
			} else {
				if (!isAllowSize) {
					this.$message.error(`上传文件大小不能超过${this.maxSize}M!`)
				}
				if (!isAllowType) {
					this.$message.error(`只能上传${acceptArr.join("/")}格式`)
				}
				return isAllowSize && isAllowType
			}
		},
		onExceed(files, fileList) {
			this.$message.error("上传文件数量不能超过" + this.limit + "个")
		},
	},
}
</script>
